/*
 * @Author: szx
 * @Date: 2022-07-01 15:43:09
 * @LastEditTime: 2022-07-05 16:20:22
 * @Description: 这个包括奇偶渐变层和正常的taskitem层
 * @FilePath: \link_jump\src\components\TasksList.tsx
 */
import React from 'react';
import { FlatList, Keyboard } from 'react-native';
import { TaskItem } from './TaskItem';

export interface Task {
  id: string;
  name: string;
  link: string;
  checked: boolean;
}

interface TasksListProps {
  tasks: Task[];
  checkTask: (index: number) => void;
  updateTaskLink: (id: string, newLink: string) => void;
}

export function TasksList({ tasks, checkTask, updateTaskLink }: TasksListProps) {
  return (
    <FlatList
      data={tasks}
      keyExtractor={(item) => String(item.id)}
      contentContainerStyle={{ paddingBottom: 24 }}
      showsVerticalScrollIndicator={true}
      removeClippedSubviews={false}
      renderItem={({ item, index }) => <TaskItem index={index} task={item} checkTask={checkTask} updateTaskLink={updateTaskLink} />}
      onScrollBeginDrag={() => Keyboard.dismiss()}
      style={{
        marginTop: 12
      }}
    />
  );
}
